<template>
  <div class="titleTable"  style="width:100%;height:30px;" >
            <table class="has-gutter">
               <!-- 上面介绍 -->
             <tr style="color:#888888;">
                <td  style="width:10%;height:30px;  padding-left:40px;">操作</td>
                <td colspan="1" rowspan="1">音乐标题</td>
                <td colspan="1" rowspan="1">歌手</td>
                <td colspan="1" rowspan="1">专辑</td>
                <td colspan="1" rowspan="1">时长</td>
             </tr> 
           </table>
      <table class="has-gutter1">
            <!-- 音乐数据 -->
               <tr @dblclick="passId(item)" style="font-size:13px; color:#242424" v-for="(item,i) in Songlist" :key="i">
                <td  style="width:10%;height:30px; padding:0 10px;">
                <span style="display:inline-block;width:30px;height:30px;line-height:30px;">{{i>=9?i+1:"0"+(1+i)}}</span>
                <i   class="el-icon-headset"></i>
                 <i style="padding-left:20px;font-size:15px;" class="el-icon-download"></i>
                </td>
                <td style="width:36%;height:30px;">{{item.name}}</td>
                <td style="width:18.2%;height:30px;">{{item.ar[0].name}}</td>
                <td style="width:17.8%;height:30px;" >{{item.al.name}}</td>
                <td colspan="1" rowspan="1">{{item.dt}}</td>
             </tr>
           </table>
           <div class="nobox"></div>
        </div>
</template>

<script>
export default {
   name:"titleTable",
   props:{
     Songlist:{
       type:Array,
       defalut:[]
     }
   },
   methods:{
       async passId(item){  //播放歌曲
    console.log(item)
       const {data:res} =await this.$request("/song/url",{
         id:item.id
       })
       if(res.code!=200) return 
       var data={
           url:res.data[0].url,
           time:item.dt,
           id:res.data[0].id,
           img:item.al.picUrl,
           name:item.name,
           nickName:item.ar[0].name
       }
       console.log(res)
      this.$Store.commit("passUrl",data)
      this.$Store.commit("Muisclist",this.Songlist)
    },
   }
   
}
</script>

<style lang="less" scoped>
     .titleTable{
        padding-bottom:20px;
        .nobox{
           width:100%;
           height:70px;
     
        }
        padding-bottom:100px;
      .has-gutter{
         
          border-spacing: 0;
         width:100%;
         height:30px;
         tr{
          width:100%;
          height:30px;
          border:1px solid #ccc;
         
         }
      }
       .has-gutter1{
      
           border-spacing: 0;
         width:100%;
         height:30px;
         tr{
          width:100%;
          height:30px;
          border:1px solid #ccc;
          td{
             
          }
         }
          tr:nth-child(2n+1){
           background-color:#E5E5E5;
        }
       }
   }
</style>